<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-page-header">
        <div class="pagewrap">
                <span class="layui-breadcrumb">
                  <a href="">首页</a>
                  <a href="">主页</a>
                  <a><cite>商品管理</cite></a>
                </span>
            <h2 class="title">商品管理</h2>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <div class="layui-form layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-form-mid">商品名称:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">商品详情:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" autocomplete="off" class="layui-input">
                            </div>
                            <button class="layui-btn layui-btn-blue">查询</button>
                            <button class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                    <a href="goods_add"><button class="layui-btn layui-btn-blue"><i class="layui-icon">&#xe654;</i>新增</button></a>
                    <table id="demo"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./assets/layui.all.js"></script>
{{--<script>--}}
{{--    var element = layui.element;--}}
{{--    var table = layui.table;--}}
{{--    table.render({--}}
{{--        elem: '#demo'--}}
{{--        , cols:[[--}}

{{--        ]]--}}
{{--    });--}}
{{--</script>--}}
</body>
</html>
<script>
    var element = layui.element;
    var table = layui.table;
    var form = layui.form;

    //展示已知数据
    table.render({
        elem: '#demo'
        ,cols: [[ //标题栏
            {field: 'id', title: 'ID', width: 120, sort: true}
            ,{field: 'name', title: '商品名称', width: 113}
            ,{field: 'detail', title: '商品详情', width: 220}
            ,{field: 'price', title: '商品价格', width: 110, sort: true}
            ,{field: 'img', title: '商品图片', width: 150}
            ,{field: 'issueNumber', title: '商品期号', width: 110, sort: true}
            ,{field: 'need', title: '总需人数', width: 110, sort: true}
            ,{field: 'inventory', title: '库存', width: 110, sort: true}
            ,{field: 'created_at', title: '创建时间', width: 180}
            ,{field: 'updated_at', title: '修改时间', width: 180}
            ,{field: 'experience', title: '操作', width: 185}
        ]]
        ,data: [
            {
                "id": "10001"
                ,"name": "手表"
                ,"detail": "666666666666666666666"
                ,"price": "1666"
                ,"img": "<img src='./images/m01.jpg'>"
                ,'issueNumber':100001
                ,'need':100
                ,"inventory": "1900"
                ,"created_at": "2020-11-6 10:13:41"
                ,"updated_at": "2020-11-6 10:13:41"
                ,"experience": "<a href='a'><button class=\"layui-btn layui-btn-blue\">修改</button></a> <a><button class=\"layui-btn layui-btn-blue\">删除</button></a>"

            }
            ,{
                "id": "10002"
                ,"name": "手表"
                ,"detail": "666666666666666666666"
                ,"price": "1800.00"
                ,"img": "<img src='./images/m01.jpg'>"
                ,'issueNumber':100001
                ,'need':100
                ,"inventory": "1900"
                ,"created_at": "2020-11-6 10:13:41"
                ,"updated_at": "2020-11-6 10:13:41"
                ,"experience": "<a href='a'><button class=\"layui-btn layui-btn-blue\">修改</button></a> <a><button class=\"layui-btn layui-btn-blue\">删除</button></a>"

            }, {
                "id": "10003"
                ,"name": "手表"
                ,"detail": "666666666666666666666"
                ,"price": "1700.00"
                ,"img": "<img src='./images/m01.jpg'>"
                ,'issueNumber':100001
                ,'need':100
                ,"inventory": "1900"
                ,"created_at": "2020-11-6 10:13:41"
                ,"updated_at": "2020-11-6 10:13:41"
                ,"experience": "<a href='a'><button class=\"layui-btn layui-btn-blue\">修改</button></a> <a><button class=\"layui-btn layui-btn-blue\">删除</button></a>"

            }, {
                "id": "10004"
                ,"name": "手表"
                ,"detail": "666666666666666666666"
                ,"price": "1600.00"
                ,"img": "<img src='./images/m01.jpg'>"
                ,'issueNumber':100001
                ,'need':100
                ,"inventory": "1900"
                ,"created_at": "2020-11-6 10:13:41"
                ,"updated_at": "2020-11-6 10:13:41"
                ,"experience": "<a href='a'><button class=\"layui-btn layui-btn-blue\">修改</button></a> <a><button class=\"layui-btn layui-btn-blue\">删除</button></a>"

            }, {
                "id": "10005"
                ,"name": "手表"
                ,"detail": "666666666666666666666"
                ,"price": "1500.00"
                ,"img": "<img src='./images/m01.jpg'>"
                ,'issueNumber':100001
                ,'need':100
                ,"inventory": "1900"
                ,"created_at": "2020-11-6 10:13:41"
                ,"updated_at": "2020-11-6 10:13:41"
                ,"experience": "<a href='a'><button class=\"layui-btn layui-btn-blue\">修改</button></a> <a><button class=\"layui-btn layui-btn-blue\">删除</button></a>"

            }, {
                "id": "10006"
                ,"name": "手表"
                ,"detail": "666666666666666666666"
                ,"price": "1400.00"
                ,"img": "<img src='./images/m01.jpg'>"
                ,'issueNumber':100001
                ,'need':100
                ,"inventory": "1400"
                ,"created_at": "2020-11-6 10:13:41"
                ,"updated_at": "2020-11-6 10:13:41"
                ,"experience": "<a href='a'><button class=\"layui-btn layui-btn-blue\">修改</button></a> <a><button class=\"layui-btn layui-btn-blue\">删除</button></a>"

            }
        ]
        ,skin: 'line' //表格风格
        ,even: true
        ,page: true //是否显示分页
        ,limit: 5 //每页默认显示的数量
        ,limits: [5, 7, 10]
    });
</script>
